<template>
    <el-skeleton :loading="load" :rows="11" animated>
        <diV>
            <el-page-header @back="goBack" content="权限详情">
            </el-page-header>
        </diV>
        <div>
            <div style="display: flex;float: left;">
                <h3>详情</h3>
            </div>
            <div v-show="(bool == true)">
                <el-form :label-position="top" ref="form" label-width="80px">
                    <template #extra>
                    <el-button type="primary" size="small" v-show="(datas.isPublish == 1)"
                        :disabled="true">已发布无法再编辑</el-button>
                    <el-button type="primary" @click="edit" size="small"
                        v-show="(datas.isPublish == 0) && bool == false" >编辑</el-button>
                    <el-button type="danger" @click="save" size="small"
                        v-show="(datas.isPublish == 0 && bool == true)">保存</el-button>
                    <el-button type="warning" @click="cancel" size="small"
                        v-show="(datas.isPublish == 0 && bool == true)">取消</el-button>
                    </template>
                    <el-descriptions :title="nametext" direction="vertical" :column="3" border>
                        <el-descriptions-item label="名称">
                            <el-input v-model="datas.name" placeholder="在此输入权限名称"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="地址"><el-input v-model="datas.url"
                                placeholder="在此输入权限地址"></el-input></el-descriptions-item>
                        <el-descriptions-item label="图标" :span="2"><el-input v-model="datas.icon"
                                placeholder="在此输入权限图标代码"></el-input></el-descriptions-item>

                        <el-descriptions-item label="序号">
                            <el-input-number style="width:100%" v-model="datas.no" :min="1" :max="9999"
                                label="描述文字"></el-input-number>
                        </el-descriptions-item>
                        <el-descriptions-item label="菜单">
                            <el-switch style="display: block" v-model="datas.isMenu" active-color="#13ce66"
                                inactive-color="#ff4949" active-text="是" inactive-text="否">
                            </el-switch>
                        </el-descriptions-item>
                        <el-descriptions-item label="公开" :span="2">
                            <el-switch style="display: block" v-model="datas.isPublic" active-color="#13ce66"
                                inactive-color="#ff4949" active-text="是" inactive-text="否">
                            </el-switch>
                        </el-descriptions-item>

                        <el-descriptions-item label="发布">
                            <el-tag v-if="(datas.isPublish == 0)" type="warning">否</el-tag>
                            <el-tag v-else type="success">是</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="禁用">
                            <el-tag v-if="(datas.isBan == 0)" type="warning">否</el-tag>
                            <el-tag v-else type="success">是</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="添加时间" :span="2">
                            <el-tag type="success">{{ datas.createTime }}</el-tag>
                        </el-descriptions-item>

                        <el-descriptions-item label="描述">
                            <el-input type="textarea" :rows="2" placeholder="对权限的补充说明" v-model="datas.explain">
                            </el-input>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
            </div>
        </div>
        <div>
            <el-descriptions direction="vertical" size="large" :column="3" border>
                <el-descriptions-item label="名称">
                    {{ datas.name }}
                </el-descriptions-item>
                <el-descriptions-item label="地址">
                    {{ datas.url }}
                </el-descriptions-item>
                <el-descriptions-item label="图标" :span="3">
                    {{ datas.icon }}
                </el-descriptions-item>
                <el-descriptions-item label="菜单">
                    <el-tag type="success" v-if="(datas.isMenu == 1)">是</el-tag>
                    <el-tag v-else type="success">否</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="公开">
                    <el-tag type="success" v-if="(datas.isPublic == 1)">是</el-tag>
                    <el-tag v-else type="success">否</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="序号">
                    {{ datas.no }}
                </el-descriptions-item>
                <el-descriptions-item label="发布">
                    <el-tag type="success" v-if="(datas.isPublish == 1)">是</el-tag>
                    <el-tag v-else type="success">否</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="禁用">
                    <el-tag type="success" v-if="(datas.isBan == 0)">否</el-tag>
                    <el-tag v-else type="danger">是</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="添加时间">
                    {{ datas.createTime }}
                </el-descriptions-item>
                <el-descriptions-item label="描述">
                    <el-tag size="large" type="info">{{ datas.explain }}</el-tag>
                </el-descriptions-item>

            </el-descriptions>
            <div>
                <div v-show="(next == true)" style="display: flex;float: left;">
                    <el-descriptions direction="vertical" title="下级权限" size="large" :column="3" border>
                        <el-descriptions-item>
                            <el-table row-key="id" v-loading="loading" border max-height="425" min-height="395"
                                :data="tableData" style="width: 100%; text-align: center" fixed>
                                <el-table-column label="序号" type="index" width="50" align="center">
                                </el-table-column>
                                <el-table-column label="权限名" align="center" width="120px" show-overflow-tooltip>
                                    <template #default="scope">
                                        {{ scope.row.name }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="地址" align="center" width="180px">
                                    <template #default="scope">
                                        {{ scope.row.url }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="图标" align="center" width="180px">
                                    <template #default="scope">
                                        {{ scope.row.icon }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="菜单" align="center">
                                    <template #default="scope">
                                        <el-tag type="success" v-if="scope.row.isMenu == 1">是</el-tag>
                                        <el-tag v-else type="danger">否</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="公开" align="center">
                                    <template #default="scope">
                                        <el-tag type="success" v-if="scope.row.isPublic == 1">是</el-tag>
                                        <el-tag v-else type="danger">否</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="发布" align="center">
                                    <template #default="scope">
                                        <el-tag type="success" v-if="scope.row.isPublish == 1">是</el-tag>
                                        <el-tag v-else type="danger">否</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="禁用" align="center">
                                    <template #default="scope">
                                        <el-tag type="danger" v-if="scope.row.isBan == 1">是</el-tag>
                                        <el-tag v-else type="success">否</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="使用" align="center">
                                    <template #default="scope">
                                        <el-tag>{{ scope.row.isUse }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" width="220">
                                    <template #default="scope">
                                        <el-button type="primary" @click="info(scope.row)" size="small">详情</el-button>
                                        <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon="el-icon-info"
                                            icon-color="red" v-if="scope.row.isPublish == 1 && scope.row.isBan == 0"
                                            title="确认要禁用吗？" @confirm="jy(scope.row)">
                                            <template #reference>
                                                <el-button size="small" type="danger">禁用</el-button>&nbsp;
                                            </template>
                                        </el-popconfirm>
                                        <template v-else-if="scope.row.isPublish == 0">
                                            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No"
                                                icon="el-icon-info" icon-color="red" title="确认要删除吗？"
                                                @confirm="del(scope.row)">
                                                <template #reference>
                                                    <el-button size="small" plain type="danger">删除</el-button>
                                                </template>
                                            </el-popconfirm>&nbsp;

                                            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No"
                                                icon="el-icon-info" icon-color="red" title="确认要发布吗？"
                                                @confirm="fb(scope.row)">
                                                <template #reference>
                                                    <el-button size="small" type="success">发布
                                                    </el-button>
                                                </template>
                                            </el-popconfirm>&nbsp;
                                        </template>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div style="display: flex;float: right;margin-left: -60px;margin-top: 5px;">
                        <el-button @click="xz" type="primary">
                            新增
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-skeleton>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getSingleRight, BanRights, PublishRights, deleteRights } from '../../api/Right/index'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
        const data = reactive({
            datas: {
                name: '',
                url: '',
                icon: '',
                isMenu: '' as any,
                isPublic: '' as any,
                no: '',
                isPublish: '' as any,
                isBan: '' as any,
                createTime: '',
                explain: '',
            },
            bool: false,
            children: [],//下级权限
            tableData: [],
            load: true,
            next: true,
            loading: false,
            id: '',
            top: 'top',
            nametext: ''
        })

        const Route = useRoute();

        const events = {
            goBack() {
                router.go(-1)
            },
            //权限详情
            getdata() {
                getSingleRight({
                    id: Route.query.id
                }).then((res: any) => {
                    data.datas = res.data
                    data.tableData = res.data.children
                    data.load = false
                })
            },
            //下级权限详情
            info(obj: any) {
                data.load = true
                data.loading = true
                data.next = false
                data.id = obj.id
                events.getdata();
            },
            //禁用
            jy(obj: any, val = 1) {
                data.loading = true;
                BanRights({
                    rids: [obj.id],
                    isBan: val
                }).then((res: any) => {
                    console.log("-----------", res);
                    if (res.result === 0) {
                        events.getdata();
                        ElMessage({
                            message: '操作成功',
                            type: 'success'
                        });
                        data.loading = false
                    } else {
                        events.getdata();
                        ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                })
            },
            //删除
            del(obj: any) {
                data.loading = true;
                deleteRights({
                    rids: [obj.id]
                }).then((res: any) => {
                    if (res.result == 0) {
                        events.getdata();
                        ElMessage({
                            message: '操作成功',
                            type: 'success'
                        });
                        data.loading = false;
                    } else {
                        ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                })
            },
            //发布
            fb(obj: any, val = 1) {
                data.loading = true;
                PublishRights({
                    rids: [obj.id],
                    isPublish: val
                }).then((res: any) => {
                    console.log("-----------", res);
                    if (res.result === 0) {
                        events.getdata();
                        ElMessage({
                            message: '操作成功',
                            type: 'success'
                        });
                        data.loading = false;
                    } else {
                        events.getdata();
                        ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                })
            },
            //新增
            xz() {
                router.push("/right/add?id=" + Route.query.id)
            },
            //编辑
            edit() {
                data.loading = true;
                data.bool = true;
                setTimeout(() => {
                    data.loading = false;
                }, 1000);
            },
            save(){

            },
            cancel(){

            }
        }

        onMounted(() => {
            events.getdata();
        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>
